<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{ padding: 0;
			   margin:0; 
			   list-style: none; }
			.clearfix:after{ content: ''; clear:both; display:  block; }
			li{ width: 100px; 
				height: 30px; 
				text-align: center; 
				line-height: 30px; 
				border:1px solid gainsboro; 
				float: left; }
			p{ width: 306px; 
			   height: 300px; 
			   background: pink; 
			   text-align: center; 
			   font-size: 50px; 
			   line-height: 300px; 
			   display: none; }
			.active{ background: greenyellow; }
			.show{ display: block; }
			#tab2,#tab1{
				float: left;
			}
			#tab2{
				margin-left:30px ;
			}
		</style>
	</head>
	<body>
		<div class="tab" id="tab1">
			<ul class="clearfix">
				<li class="active">1</li>
				<li>2</li>
				<li>3</li>
			</ul>
			<p class="show">1</p>
			<p>2</p>
			<p>3</p>
		</div>
		
		<div class="tab" id="tab2">
			<ul class="clearfix">
				<li class="active">1</li>
				<li>2</li>
				<li>3</li>
			</ul>
			<p class="show">1</p>
			<p>2</p>
			<p>3</p>
		</div>

	<script>
		//声明构造函数
		function tabFn(str){
			this.oPar=document.querySelector(str)
			this.aBtn=this.oPar.querySelectorAll('li')
			this.list=this.oPar.querySelectorAll('p');
			var _this=this;
			for(var i=0;i<this.aBtn.length;i++){
				this.aBtn[i].index=i;
				this.aBtn[i].onclick=function(){
					_this.change(this.index);
				}
			}
			tabFn.prototype.change=function(n){
				for(var i=0;i<this.aBtn.length;i++){
					this.aBtn[i].className='';
					this.list[i].className='';
				}
				this.list[n].className='show';
				this.aBtn[n].className='active';
			}
			
		}
		
		var tab1=new tabFn('#tab1');
		var tab2=new tabFn('#tab2');
	</script>
	</body>
</html>
